import { updateInstructReceipt } from '@/services/api/api-instruct-receipt';
import { DrawerForm, ProFormInstance, ProFormTextArea } from '@ant-design/pro-components';
import { message, Tag } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import { useRef, useState } from 'react';
import { useAccess } from 'umi';
import UploadDragger from '../components/UploadDragger';

interface UpdateReceiptProps {
  item: InstructReceiptData.ReceiptPage;
  onSave: () => void;
}

const UpdateReceipt: React.FC<UpdateReceiptProps> = ({ item, onSave }) => {
  const access = useAccess();
  const formRef = useRef<ProFormInstance>();

  const [isUpload, setIsUploadState] = useState<boolean>(false);

  return (
    <DrawerForm
      title="编辑回执"
      trigger={
        <Tag color="blue" style={{ marginLeft: 5 }}>
          编辑
        </Tag>
      }
      layout="horizontal"
      formRef={formRef}
      autoFocusFirstInput
      drawerProps={{
        size: 'large',
        forceRender: true,
        destroyOnClose: true,
        width: 800,
      }}
      initialValues={{
        content: item.content,
        attachments: item.attachments?.map((a) => {
          return {
            uid: a.id,
            id: a.id,
            mimeType: a.mimeType,
            name: a.name,
            url: a.content,
            thumbUrl: a.content,
            status: 'done',
            file: {
              uid: a.id,
              id: a.id,
              mimeType: a.mimeType,
              name: a.name,
              url: a.content,
              thumbUrl: a.content,
              status: 'done',
            },
          };
        }),
      }}
      onFinish={async (values) => {
        if (
          values.content === undefined ||
          values.content.length === 0 ||
          values.content.trim() === ''
        ) {
          message.warning('请输入回执内容');
          return;
        }

        if (values.attachments !== undefined && values.attachments.length > 0) {
          const attachments = values.attachments
            .filter((item: { status: string }) => {
              return item.status === 'done';
            })
            .map((item: { response: { data: { id: any } } }) => {
              if (item.response) {
                return item.response.data.id;
              } else {
                return item.id;
              }
            });

          values.attachments = attachments;
        }

        const response = await updateInstructReceipt({
          recordId: item.recordId,
          id: item.id,
          ...values,
        });
        if (response.code === 0) {
          message.success('提交成功');
          onSave();
          return true;
        } else {
          return false;
        }
      }}
    >
      <ProFormTextArea
        name="content"
        required
        label=""
        initialValue={item.content}
        placeholder="请输入回执"
        fieldProps={{
          rows: 10,
          count: {
            show: true,
          },
        }}
      />
      <FormItem name="attachments">
        <UploadDragger
          onPreview={(file) => {}}
          access={{
            isPicture: true,
            isVideo: true,
            isOffice: true,
            isOther: true,
          }}
          url="/instruct/attachment/save"
        />
      </FormItem>
    </DrawerForm>
  );
};

export default UpdateReceipt;
